<template>
  <div class="demo">
    <div class="demo-title">多种形态的 PageHeader</div>
    <div class="demo-content">
      <PageHeader
        class="demo-page-header"
        style="border: 1px solid rgb(235, 237, 240)"
        title="Title"
        sub-title="This is a subtitle"
        @back="() => $router.go(-1)"
      >
        <template #extra>
          <Button key="3">Operation</Button>
          <Button key="2">Operation</Button>
          <Button key="1" type="primary">Primary</Button>
        </template>
        <Descriptions size="small" :column="3">
          <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
          <Descriptions.Item label="Association">
            <a>421421</a>
          </Descriptions.Item>
          <Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
          <Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
          <Descriptions.Item label="Remarks">
            Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
          </Descriptions.Item>
        </Descriptions>
      </PageHeader>
      <br />
      <PageHeader title="Title" sub-title="This is a subtitle" @back="() => $router.go(-1)">
        <template #tags>
          <Tag color="blue">Running</Tag>
        </template>
        <template #extra>
          <Button key="3">Operation</Button>
          <Button key="2">Operation</Button>
          <Button key="1" type="primary">Primary</Button>
        </template>
        <Row type="flex">
          <Statistic title="Status" value="Pending" />
          <Statistic
            title="Price"
            prefix="$"
            :value="568.08"
            :style="{
              margin: '0 32px',
            }"
          />
          <Statistic title="Balance" prefix="$" :value="3345.08" />
        </Row>
      </PageHeader>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import Button from '@sscd/button';
  import Descriptions from '@sscd/descriptions';
  import { Row } from '@sscd/grid';
  import Statistic from '@sscd/statistic';
  import Tag from '@sscd/tag';
  import PageHeader from '@sscd/page-header';
</script>

<style lang="less" scoped>
  .demo-page-header {
    :deep(tr:last-child td) {
      padding-bottom: 0;
    }
  }
</style>
